<template>
  <div :class="$style.wrap">
    <el-dialog :visible.sync="visible" title="附件" @close="closehandle">
      <div :class="$style.annexList">
        <a v-for="(item,i) in annexList" :key="i" :href="prefix + item.filePath" :download="item.fileName">{{ item.fileName }}</a>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { careTaskDetail } from '@/api/guestCare'
export default {
  name: 'AnnexDown',
  components: {
  },
  props: {
    id: {
      type: String,
      default: ''
    },
    prefix: {
      type: String,
      default: '/img/'
    }
  },
  data() {
    return {
      visible: false,
      annexList: []
    }
  },
  watch: {
    id: {
      handler() {
        if (!this.id) return
        this.getDetail()
      },
      immediate: true
    }
  },
  methods: {
    closehandle() {
      this.$emit('close')
    },
    getDetail() {
      careTaskDetail(this.id).then(res => {
        if (res.data.careTaskAnnexList && res.data.careTaskAnnexList.length > 0) {
          this.annexList = res.data.careTaskAnnexList
        } else {
          this.$message.info('没有附件！')
          this.visible = false
        }
      })
    }
  }
}
</script>
<style lang='scss' module>
.wrap{
    display: inline-block;
    text-align: left;
    & .annexList{
        &>a{
            display: block;
            height: 25px;
            line-height: 25px;
            cursor: pointer;
            &:hover{
                background-color: rgb(205, 244, 232);
            }
        }
    }
}
</style>
